<template>
  <el-dropdown trigger="click" :teleported="false">
    <div class="more-button">
      <i :class="'iconfont icon-xiala'"></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="refresh">
          <el-icon><Refresh /></el-icon>刷新
        </el-dropdown-item>
        <el-dropdown-item @click="maximize">
          <el-icon><FullScreen /></el-icon>最大化
        </el-dropdown-item>
        <el-dropdown-item divided @click="closeCurrentTab">
          <el-icon><Remove /></el-icon>关闭当前
        </el-dropdown-item>
        <el-dropdown-item @click="useTabs.closeTabsOnSide(route.fullPath, 'left')">
          <el-icon><DArrowLeft /></el-icon>关闭左侧
        </el-dropdown-item>
        <el-dropdown-item @click="useTabs.closeTabsOnSide(route.fullPath, 'right')">
          <el-icon><DArrowRight /></el-icon>关闭右侧
        </el-dropdown-item>
        <el-dropdown-item divided @click="useTabs.closeOtherTabs(route.fullPath)">
          <el-icon><CircleClose /></el-icon>关闭其他
        </el-dropdown-item>
        <el-dropdown-item @click="useTabs.closeAllTabs">
          <el-icon><FolderDelete /></el-icon>关闭全部
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useGlobalStore, useKeepAliveStore, useTabsStore } from "@/stores";
import { inject, nextTick } from "vue";
import { useRoute } from "vue-router";

const refreshCurrentPage: Function = inject("refresh") as Function;
const useKeepAlive = useKeepAliveStore();
const route = useRoute();
const useGlobal = useGlobalStore();
const useTabs = useTabsStore();

/**
 * @description 刷新
 */
const refresh = () => {
  setTimeout(() => {
    useKeepAlive.removeKeepAliveName(route.name as string);
    refreshCurrentPage(false);
    nextTick(() => {
      useKeepAlive.addKeepAliveName(route.name as string);
      refreshCurrentPage(true);
    });
  }, 0);
};

/**
 * @description 全屏
 */
const maximize = () => {
  useGlobal.globalConfig.maximize = true;
};

/**
 * @description 关闭当前
 */
const closeCurrentTab = () => {
  if (route.meta.isAffix) return;
  useTabs.closeTab(route.fullPath);
  useKeepAlive.removeKeepAliveName(route.name as string);
};
</script>

<style scoped lang="scss">
@import "../index.scss";
</style>
